<template>
  <div class="pagebox">
    <div class="app-container ">
      <div class="sunNumBox bg">
         <a-button  type="primary" icon="edit" @click="goback" style="margin-right:20px">
          返回
        </a-button>
        <a-button v-if="type==2" type="primary" icon="plus" @click="editFile">
          保存
        </a-button>
        <a-button v-if="type==1" type="primary" icon="edit" @click="editbtn">
          编辑
        </a-button>
      </div>
      <div style="width: 100%;height: 600px;padding: 20px" class="bg">

        <codemirror ref="myCm" v-model="detail" :options="cmOptions" @changes="changes" class="code"></codemirror>

      </div>
    </div>
  </div>

</template>
<script>
import { codemirror } from "vue-codemirror";
//代码编辑器
require("codemirror/mode/python/python.js");
require("codemirror/addon/fold/foldcode.js");
require("codemirror/addon/fold/foldgutter.js");
require("codemirror/addon/fold/brace-fold.js");
require("codemirror/addon/fold/xml-fold.js");
require("codemirror/addon/fold/indent-fold.js");
require("codemirror/addon/fold/markdown-fold.js");
require("codemirror/addon/fold/comment-fold.js");
import "codemirror/theme/ambiance.css";  // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
require("codemirror/mode/javascript/javascript"); // 这里引入的模式的js，根据设置的mode引入，一定要引入！！
import api from "@/api/cloudStorage";

export default {
  components: {
    codemirror
  },
  data() {
    return {
      fileId: "",
      detail: "",
      contenteditable: false,
      type: 1,
      editText: "",
      cmOptions: {
        mode: { name: "javascript", json: true },
        readOnly: true,
        theme: "ambiance",// ambiance, foo bar, darcula //配置编辑器的主题样式
        indentUnit: 4, //缩进单位
        smartIndent: true, // 自动缩进
        tabSize: 4, //tab字符的宽度
        lineNumbers: true, // 是否显示行
        firstLineNumber: 1, //第一行的行号
        showCursorWhenSelecting: true // 在选择时是否显示光标
      },
      file: "",
      filename: ""
    };
  },
  created() {
    this.fileId = this.$route.query.id;
    this.type = this.$route.query.type;
    this.filename=this.$route.query.name

    if (this.type == 1) {
      this.cmOptions.readOnly = true;
      this.cmOptions.theme = "ambiance";
    } else {
      this.cmOptions.readOnly = false;
      this.cmOptions.theme = "foo bar";
    }
    this.readFile();
  },
  methods: {
    goback(){
         this.$router.go(-1);//返回上一层
    },
    changes(val) {
      // console.log(val);
      // console.log(this.detail);
    },
    editbtn() {
      this.type = 2;
      this.cmOptions.readOnly = false;
      this.cmOptions.theme = "foo bar";
    },

    readFile() {
      api.readFile({ fileId: this.fileId }).then(res => {
        this.detail = res;
      });
    },
    editFile() {
      //将字符串 转换成 Blob 对象
      var blob = new Blob([this.detail], {
        type: "text/plain"
      });
      let file = new window.File([blob], this.filename, { type: "text/plain;charset=utf-8" });
      let fd = new FormData();
      fd.append("fileId", this.fileId);//传文件
      fd.append("file", file);//传其他参数
      api.editFile(fd).then(res => {
        if(res.code==200){
          this.$message.info('编辑成功')
          this.readFile();
          this.type = 1;
          this.cmOptions.readOnly = true;
          this.cmOptions.theme = "ambiance";
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
@import "index.less";
</style>
